<!--
  * 时间：2023/12/04
  * 作者：刘岩
  * 描述：标题组件
-->
<template>
  <div class="aside-title">
    <div class="title-bar-left">
      <img class="title-circle" :src="iconSrc" alt=""/>
      <div class="title-text">
        {{ titleName }}
      </div>
      <slot></slot>
    </div>
    <div class="title-bar-right" v-if="isDateTabs">
      <span class="date" :class="{'is-active': dateIndex === 'day'}" @click="dateClick('day')">日</span>
      <span class="date" :class="{'is-active': dateIndex === 'month'}" @click="dateClick('month')">月</span>
      <span class="date" :class="{'is-active': dateIndex === 'year'}" @click="dateClick('year')">年</span>
    </div>
    <div class="title-bar-right" v-if="isDate">
      <el-date-picker
        class="title-bar-picker"
        v-model="date"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :clearable="false"
        @change="dateClick(date, 'date')"
      >
      </el-date-picker>
      <img class="search-icon" src="@/assets/large/search-icon.png" alt="" @click="dateClick(date, 'date')">
    </div>
  </div>
</template>

<script>
export default {
  name: 'titleBar',
  components: {},
  props: {
    // 名称
    titleName: {
      type: String,
      default: ''
    },
    titleHeight: {
      type: Number,
      default: 34
    },
    fontSize: {
      type: Number,
      default: 17
    },
    // icon图标
    iconSrc: {
      type: String,
      default: require('@/assets/large/small-title-pot.png')
    },
    // 日月年状态
    isDateTabs: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    // 日期筛选
    isDate: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {
      date: new Date(),
      dateIndex: 'day'
    };
  },
  methods: {
    /**
     * 时间：2023/12/4
     * 作者：刘岩
     * 功能：日 月 年 切换
     */
    dateClick(type) {
      this.dateIndex = type;
      this.$emit('dateClick', type);
    }
  }
};
</script>
<style lang="scss" scoped>
.aside-title {
  width: 100%;
  height: 34px;
  position: relative;
  background-image: url('~@/assets/large/small-title-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title-bar-left {
    position: relative;
    display: flex;
    flex: 1;
    .title-circle {
      position: absolute;
      top: 3px;
      left: 10px;
      width: 25px;
      height: 25px;
    }
    .title-text {
      //width: calc(100% - 100px);
      height: 34px;
      line-height: 25px;
      padding-left: 40px;
      //position: absolute;
      //top: -8px;
      //left: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 600;
      //font-style: italic;
      color: #ffffff;
      text-shadow: 0 0 10px #009cff, 0 0 10px #009cff;
      letter-spacing: 2px;
    }
  }
  .title-bar-right {
    margin-right: 10px;
    margin-top: -10px;
    position: relative;
    .date {
      display: inline-block;
      width: 30px;
      height: 20px;
      text-align: center;
      margin: 0 2px;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
      background-image: url('~@/assets/large/dateBtn-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .is-active {
      background-image: url('~@/assets/large/dateBtnActive-bg.png');
    }
    .title-bar-picker {
      width: 160px;
      height: 26px;
      ::v-deep.el-input__inner {
        height: 26px;
        line-height: 26px;
        padding-left: 5px;
        background-color: #0b2756;
        border-color: #ffffff;
        color: #ffffff;
      }
      ::v-deep.el-input__prefix {
        display: none;
      }
    }
    .search-icon {
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
    }
  }
}
</style>

